
<script>
import { getMovieDetail } from "../api/movie.js";
//npm install vue-count-to  安装插件
import { CountTo } from "vue3-count-to";
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
  components: {
    CountTo,
  },
  setup() {
    const value = ref(2.5);
    const state = useStore();
    const router = useRouter();
    const route = useRoute();
    let mivieinfo = ref(null); //影片信息
    let catinfo = ref(null); //影片分类
    let starinfo = ref(null); //主演信息
    let reputation = ref(null); //评分信息
    let celebrities = ref(null); //演员信息
    let feedVideos = ref(null); //视频推荐
    let moviephotos = ref(null); //剧照
    let comments = ref(null); //评论
    let relatedMovies = ref(null); //相关视频
    let open = ref(true); //展开内容
    let loading = ref(true); //加载动画
    let currentId = ref(state.state.id); //当前电影id
    let wishlist = ref([]); //想看列表
    let wishflag = ref(false);
    let scrollRef = ref(null);
    let storeId = ref(state.state.id);
    //数字开始
    let startVal = ref(0);
    //数字结束
    let endVal1 = ref(null);
    let endVal2 = ref(null);
    let endVal3 = ref(null);
    let endVal4 = ref(null);


    //获取影片详情
    let getDteailFun = (id) => {
      getMovieDetail({ movieId: id }).then((data) => {
        // console.log(data);
        mivieinfo.value = data.movie;
        mivieinfo.value.guideToWish = false;
        let temp = JSON.parse(window.localStorage.getItem("wish"));
        if (temp != null) {
          let flag = temp.some((item) => item.id == mivieinfo.value.id);
          if (flag) {
            mivieinfo.value.guideToWish = true;
          }
        }
        moviephotos.value = data.movie.photos;
        catinfo.value = data.movie.cat.split(",");
        starinfo.value =data.movie.star == null ? null : data.movie.star.split(",");
        reputation.value = data.reputation;
        celebrities.value = data.celebrities;
        feedVideos.value =data.feedVideos == null ? null : data.feedVideos.feeds;
        comments.value = data.comments.hotComments;
        comments.value.forEach((item) => {
          if (item.score) {
            item.score = item.score / 2;
          }
        });
        relatedMovies.value = data.relatedMovies;

        //设置数字结束
        endVal1.value = mivieinfo.value.wish;
        endVal2.value = mivieinfo.value.watched;
        endVal3.value = mivieinfo.value.snum;
        endVal4.value = mivieinfo.value.wish;

        setTimeout(() => {
          loading.value = false;
        }, 500);
      });
    };
    getDteailFun(storeId.value);
    // 相关电影
    let related = (id) => {
      loading.value = true;
      scrollRef.value.scrollTop = 0;
      getDteailFun(id);
    };
    // 想看
    let wish = () => {
      mivieinfo.value.guideToWish = !mivieinfo.value.guideToWish;
      let temp =
        JSON.parse(window.localStorage.getItem("wish")) == null
          ? []
          : JSON.parse(window.localStorage.getItem("wish")); //获取存储数据

      if (mivieinfo.value.guideToWish) {
        //ture
        mivieinfo.value.wish = mivieinfo.value.wish + 1; //数量加一
        endVal1.value = mivieinfo.value.wish;
        temp = [...temp, mivieinfo.value];
        window.localStorage.setItem("wish", JSON.stringify(temp));
      } else {
        mivieinfo.value.wish = mivieinfo.value.wish - 1; //数量减一
        endVal1.value = mivieinfo.value.wish;
        let index = temp.findIndex((item) => item.id == mivieinfo.value.id);
        temp.splice(index, 1);
        window.localStorage.setItem("wish", JSON.stringify(temp));
      }
    };
    // 返回
    let back = () => {
      router.go(-1);
    };
    // 买票
    let moviebuy = () => {
      router.push({
        path: "/ticketpurchase",
        query: { movieId: mivieinfo.value.id, cityId: route.query.id },
      });
    };
    //跳转预告片详情
    let showfreed = (id) => {
      router.push({
        path: "/videoplay",
        query: { id: mivieinfo.value.id, freedId: id },
      });
    };
    //过滤时间
    let time = (value) => {
      var time = new Date(value);
      var m = time.getMonth() + 1;
      var d = time.getDate();

      return `${m}月${d}日`;
    };

    // 播放预告片
    let tovideoPlay = (id) => {
      router.push({
        path: "/videoplay",
        query: {
          id: id,
        },
      });
    };

    //拖拽返回
    const startX = ref(null)
    const endX = ref(null)
    const startY = ref(null)
    const endY = ref(null)
    const tagback = ref(null)

    //开始
    let touchstartHandle = (e) =>{
        startX.value=e.changedTouches[0].clientX
        startY.value=e.changedTouches[0].clientY
        if (startY.value>245) { 
            tagback.value.style.top=startY.value-45 + 'px'
        }
        
    }
    // 移动
    let touchmoveHandle = (e) =>{
        let movex = e.changedTouches[0].clientX
        if (startX.value<=150 && startY.value>245) {
        tagback.value.style.width=String(movex) +'px'
        }
    }
    // 结束
    let touchendHandle = (e) =>{
        tagback.value.style.width = '0px'
        endX.value=e.changedTouches[0].clientX
        endY.value=e.changedTouches[0].clientY
        let x = parseInt(endX.value-startX.value)   
        let y = Math.abs(parseInt(endY.value-startY.value))
        if (x>70 && y<10 && startX.value<150 && startY.value>245) {
            router.go(-1)
        }
    }


    return {
      mivieinfo, //影片信息
      catinfo, //影片分类
      starinfo, //主演信息
      reputation, //评分信息
      celebrities, //演员信息
      feedVideos, //视频推荐
      moviephotos, //剧照
      comments, //评论
      relatedMovies, //相关视频
      open, //展开内容
      loading, //加载动画
      currentId, //当前电影id
      wishlist, //想看列表
      wishflag,
      storeId,
      scrollRef,
      //数字开始
      startVal,
      //数字结束
      endVal1,
      endVal2,
      endVal3,
      endVal4,
      router,
      route,
      related,
      wish,
      moviebuy,
      showfreed,
      time,
      back,
      value,
      tovideoPlay,
      touchstartHandle,
      touchendHandle,
      touchmoveHandle,
      tagback
    };
  },
};
</script>


<template>
  <div class="detail-page" ref="scrollRef">
    <div v-if="!loading">
      <div
        class="movie-info"
        v-if="mivieinfo"
        :style="{ backgroundColor: mivieinfo.backgroundColor }"
      >
        <div class="topback">
          <div class="old" @click="back">卖票猫</div>
          &nbsp;>&nbsp;
          <span class="now">{{ mivieinfo.nm }}</span>
        </div>
        <div class="movie-info-top">
          <div class="movie-cover">
            <div class="img" @click="tovideoPlay(mivieinfo.id)">
              <img class="poster" :src="mivieinfo.img" alt="" />
              <img
                class="play-icon"
                src="../assets/images/poster-play.png"
                alt=""
              />
            </div>
          </div>
          <div class="movie-desc">
            <div class="movie-desc-top">
              <div class="movie-cn-name">
                <h1>{{ mivieinfo.nm }}</h1>
              </div>
              <div class="movie-en-name">{{ mivieinfo.enm }}</div>
              <div class="movie-other-info">
                <div class="movie-type">
                  <span class="movie-cat"
                    >{{ catinfo[0] }} / {{ catinfo[1] }}</span
                  >
                  <span class="movie-tag" v-if="mivieinfo.ver">
                    <img src="../assets/images//movie-tag-2DIMAX.png" alt="" />
                  </span>
                </div>
                <div class="actors" v-if="starinfo">
                  <span>{{ starinfo[0] }}&nbsp;/</span>
                  <span>{{ starinfo[1] }}&nbsp;/</span>
                  <span>{{ starinfo[2] }}</span>
                </div>
                <div class="movie-show-time">
                  <span
                    >{{ mivieinfo.onlineDate }} / {{ mivieinfo.dur }}分钟</span
                  >
                </div>
              </div>
            </div>
            <div class="btns">
              <button
                @click="wish"
                :class="{ 'wanted-to-watch': mivieinfo.guideToWish }"
              >
                <img
                  src="../assets/images/want-to-watch.png"
                  alt=""
                  v-if="!mivieinfo.guideToWish"
                />
                <span>{{ mivieinfo.guideToWish ? "已想看" : "想看" }}</span>
              </button>
              <button>
                <img src="../assets/images/star.png" alt="" />
                <span>看过</span>
              </button>
            </div>
          </div>
        </div>
        <div
          class="real-time-word-of-mouth"
          v-if="mivieinfo.scoreLabel != '暂无评分'"
        >
          <div class="top">
            <div class="left">
              <img src="../assets/images/logo-new.png" alt="" />
              <span>{{ mivieinfo.scoreLabel }}</span>
            </div>
            <div class="right">
              <div class="num">
                <span
                  ><count-to
                    :startVal="startVal"
                    :endVal="endVal1"
                    :duration="2000"
                  ></count-to
                ></span>
                <span>人想看</span>
              </div>
              <div class="num watched">
                <span
                  ><count-to
                    :startVal="startVal"
                    :endVal="endVal2"
                    :duration="2000"
                  ></count-to
                ></span>
                <span>人看过</span>
              </div>
              <div class="img">
                <img src="../assets/images/arrow-right-white.png" alt="" />
              </div>
            </div>
          </div>
          <div class="middle">
            <div class="left-section">
              <div class="left">
                <span class="score">{{ mivieinfo.sc }}</span>
                <div class="people-grade">
                  <span
                    ><count-to
                      :startVal="startVal"
                      :endVal="endVal3"
                      :duration="2000"
                    ></count-to></span
                  >&nbsp;
                  <span>人评</span>
                </div>
              </div>
              <div class="right">
                <div class="stars-percent-bar">
                  <div class="stars">
                    <img src="../assets/images/white-star.png" alt="" />
                    <img src="../assets/images/white-star.png" alt="" />
                    <img src="../assets/images/white-star.png" alt="" />
                    <img src="../assets/images/white-star.png" alt="" />
                    <img src="../assets/images/white-star.png" alt="" />
                  </div>
                  <div class="bar">
                    <div class="percent" :class="{ active1: !loading }"></div>
                  </div>
                </div>
                <div class="stars-percent-bar">
                  <div class="stars">
                    <img src="../assets/images/grey-star.png" alt="" />
                    <img src="../assets/images/white-star.png" alt="" />
                    <img src="../assets/images/white-star.png" alt="" />
                    <img src="../assets/images/white-star.png" alt="" />
                    <img src="../assets/images/white-star.png" alt="" />
                  </div>
                  <div class="bar">
                    <div class="percent" :class="{ active1: !loading }"></div>
                  </div>
                </div>
                <div class="stars-percent-bar">
                  <div class="stars">
                    <img src="../assets/images/grey-star.png" alt="" />
                    <img src="../assets/images/grey-star.png" alt="" />
                    <img src="../assets/images/white-star.png" alt="" />
                    <img src="../assets/images/white-star.png" alt="" />
                    <img src="../assets/images/white-star.png" alt="" />
                  </div>
                  <div class="bar">
                    <div class="percent" :class="{ active1: !loading }"></div>
                  </div>
                </div>
                <div class="stars-percent-bar">
                  <div class="stars">
                    <img src="../assets/images/grey-star.png" alt="" />
                    <img src="../assets/images/grey-star.png" alt="" />
                    <img src="../assets/images/grey-star.png" alt="" />
                    <img src="../assets/images/white-star.png" alt="" />
                    <img src="../assets/images/white-star.png" alt="" />
                  </div>
                  <div class="bar">
                    <div class="percent" :class="{ active1: !loading }"></div>
                  </div>
                </div>
                <div class="stars-percent-bar">
                  <div class="stars">
                    <img src="../assets/images/grey-star.png" alt="" />
                    <img src="../assets/images/grey-star.png" alt="" />
                    <img src="../assets/images/grey-star.png" alt="" />
                    <img src="../assets/images/grey-star.png" alt="" />
                    <img src="../assets/images/white-star.png" alt="" />
                  </div>
                  <div class="bar">
                    <div class="percent" :class="{ active1: !loading }"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="right-reputation" v-if="reputation.movieRank">
              <div class="reputation-box">
                <img src="../assets/images//top1-reputation.png" alt="" />
                <div class="rank">
                  <span class="rank-top">TOP</span>
                  <span class="rank-num">{{ reputation.movieRank }}</span>
                </div>
                <div class="desc">
                  <span class="first-word">{{ reputation.firstWord }}</span>
                  <span class="second-word">{{ reputation.secondWord }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="awardBottom"></div>
        </div>
        <div
          class="real-time-word-of-mouth"
          v-if="mivieinfo.scoreLabel == '暂无评分'"
        >
          <div class="top">
            <div class="left">
              <img src="../assets/images/logo-new.png" alt="" />
              <span>猫眼想看</span>
            </div>
          </div>
          <div class="middle">
            <div class="left-section">
              <div class="left wanted">
                <div class="score">
                  <span
                    ><count-to
                      :startVal="startVal"
                      :endVal="endVal4"
                      :duration="2000"
                    ></count-to
                  ></span>
                  <span class="txt">人想看</span>
                </div>
              </div>
            </div>
          </div>
          <div class="awardBottom"></div>
        </div>
        <div class="movie-watching-tips" v-if="mivieinfo.egg">
          <div class="tip">
            <div class="icon">
              <img src="../assets/images//tip-icon-surprise.png" alt="" />
            </div>
            <span>有1个彩蛋，片尾</span>
          </div>
        </div>
        <div class="brief-introduction">
          <div class="title">
            <span>简介</span>
            <div>
              <button
                type="button"
                :class="[{ open: open }, { close: !open }]"
                @click="open = !open"
              >
                <span>展开</span>
                <img src="../assets/images/arrow-right.png" alt="" />
              </button>
            </div>
          </div>
          <div class="content">
            <p :class="['normal-line', { 'line-clamp': open }]">
              {{ mivieinfo.dra }}
            </p>
          </div>
        </div>
        <div class="actors" v-if="celebrities">
          <div class="title">
            <span>演职人员</span>
            <div class="go-to-all-actors">
              <span>全部</span>
              <img src="../assets/images/arrow-right.png" alt="" />
            </div>
          </div>
          <div class="actor-list">
            <ul>
              <li
                v-for="(item, index) in celebrities"
                :key="index"
                :class="{ 'left-margin': item.roles }"
              >
                <div>
                  <img :src="item.avatar" v-lazy="item.avatar" alt="" />
                  <span class="name">{{ item.cnm }}</span>
                  <span class="role">{{ item.desc }}</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="videos" v-if="feedVideos">
          <div class="title">
            <span>视频推荐</span>
            <div class="go-to-all">
              <span>全部</span>
              <img src="../assets/images//arrow-right.png" alt="" />
            </div>
          </div>
          <div class="videos-list">
            <ul>
              <li
                class="video"
                v-for="(item, index) in feedVideos"
                :key="index"
                @click="showfreed(item.id)"
              >
                <div>
                  <img :src="item.video.imgUrl" v-lazy="item.video.imgUrl" alt="" />
                  <div class="play">
                    <div class="triangle"></div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="photos" v-if="moviephotos">
          <div class="title">
            <span>剧照</span>
            <div class="go-to-all">
              <span>全部{{ moviephotos.length }}张</span>
              <img src="../assets/images/arrow-right.png" alt="" />
            </div>
          </div>
          <div class="photos-list">
            <ul>
              <li v-for="(item, index) in moviephotos" :key="index">
                <div>
                  <img :src="item" v-lazy="item" alt="" />
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <section class="discussion" v-if="comments">
        <header>
          <span class="title">短评</span>
        </header>
        <div class="comments">
          <article
            :class="{ 'no-padding-top': index == 0 }"
            v-for="(item, index) in comments"
            :key="index"
          >
            <div class="left">
              <img :src="item.avatarUrl" alt="" class="avatar" />
            </div>
            <div class="right">
              <div class="top">
                <div class="title-container">
                  <div class="name-box">
                    <span class="name">{{ item.nick }}</span>
                    <img
                      src="https://obj.pipi.cn/festatic/common/image/c853ef8e3cb69ad7bced9c38c39af045.png"
                      alt=""
                      class="level-icon"
                    />
                  </div>
                  <div class="commentstar">
                    <div class="star-wrap" v-if="item.score != 0">
                      <van-rate
                        v-model="item.score"
                        color="#ffd21e"
                        count="5"
                        allow-half
                        void-icon="star"
                        void-color="#eee"
                        size="8px"
                        readonly
                      />

                      <!-- <van-rate v-model="value" allow-half /> -->
                      <span class="star-score">{{ item.score }}</span>
                      <span class="star-word">分</span>
                    </div>
                    <span class="commentstar-buyticket" v-if="item.buyTicket"
                      >购票</span
                    >
                  </div>
                </div>
                <div class="title-appove">
                  <div class="hierarchy">
                    <div class="link">
                      <img
                        class="thumb-up"
                        src="https://p1.meituan.net/scarlett/80f9c16d3e6ad90f7bc74cc4249b24151600.png@80q"
                        alt=""
                      />
                      <span class="approve-word">{{ item.upCount }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="middle">
                <span class="comment-content">{{ item.content }}</span>
              </div>
              <div class="bottom">
                <span class="time">{{ time(item.time) }}</span>
                <div class="goto-comments">
                  <div class="reply">
                    {{ item.replyCount }}<span>回复</span>
                  </div>
                </div>
              </div>
            </div>
          </article>
        </div>
      </section>

      <section class="related-movies" v-if="relatedMovies">
        <header>
          <span>相关影片</span>
        </header>
        <div class="movies">
          <ul>
            <li
              @click="related(item.id)"
              v-for="(item, index) in relatedMovies"
              :key="index"
            >
              <div class="img-box">
                <img
                  :src="item.img + '?imageView2/1/w/192/h/268/q/80'"
                  v-lazy="item.img"
                  alt=""
                />
                <div class="img-mask"></div>
                <div class="grade" v-if="item.sc != 0">
                  <span>猫眼评分</span>
                  <span class="score">{{ item.sc }}</span>
                </div>
                <div class="grade" v-if="item.sc == 0">
                  <span>暂无评分</span>
                </div>
              </div>
              <span class="name">{{ item.title }}</span>
            </li>
          </ul>
        </div>
      </section>
      <div class="buy-ticket-btn">
        <div class="buy-wrapper" @click="moviebuy">
          <img src="../assets/images/share-icon.png" alt="" />
          <div class="goto-ticket">购票</div>
        </div>
      </div>
    </div>
    <div class="lodaing" v-if="loading" @touchstart="touchstartHandle($event)" @touchmove="touchmoveHandle($event)" @touchend="touchendHandle($event)">
      <div class="img">
        <img class="img1" src="../assets/images/maoyan01.png" alt="" />
        <img class="img2" src="../assets/images/maoyan02.png" alt="" />
      </div>
      <div class="tag_back" ref="tagback">
        <span class="tag_icon"></span>
    </div>
    </div>
  </div>
</template>


<style lang="less" scoped>
.detail-page {
  height: 100%;
  overflow-y: scroll;
  .movie-info {
    width: 100%;
    overflow: hidden;
    background-color: #664d29;
    padding: 21px 16px;
    box-sizing: border-box;
    .topback {
      display: flex;
      align-items: center;
      color: #ccc;
      margin-bottom: 15px;
      .now,
      .old {
        color: #ccc;
        font-size: 14px;
      }
    }
    .movie-info-top {
      display: flex;
      justify-content: flex-start;

      .movie-cover {
        width: 100px;
        height: 138px;
        flex-shrink: 0;
        position: relative;

        .poster {
          width: 100px;
          height: 138px;
        }
        .play-icon {
          width: 30px;
          height: 30px;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
      .movie-desc {
        flex-grow: 1;
        margin-left: 12px;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        overflow: hidden;

        .movie-desc-top {
          display: flex;
          flex-flow: column;
          justify-content: flex-start;
          flex-grow: 1;

          .movie-cn-name {
            height: 38px;
            font-size: 20px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-weight: 700;

            & > h1 {
              height: 30px;
              line-height: 30px;
              font-size: 20px;
              display: inline-block;
              width: 206px;
              color: #fff;
              font-weight: bold;
            }
          }
          .movie-en-name {
            height: 18px;
            line-height: 18px;
            color: #fff;
            font-size: 12px;
            opacity: 0.6;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          .movie-other-info {
            display: flex;
            flex-grow: 1;
            flex-flow: column;
            color: #fff;
            justify-content: center;

            .movie-type {
              height: 18px;
              font-size: 12px;
              display: flex;
              align-items: center;

              .movie-cat {
                opacity: 0.6;
              }
              .movie-tag {
                border-radius: 2px;
                margin-left: 4px;
                vertical-align: text-bottom;
                display: flex;
                align-items: center;

                & > img {
                  height: 14px;
                }
              }
            }
            .actors {
              height: 18px;
              line-height: 18px;
              opacity: 0.6;
              font-size: 12px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              margin: 0;
            }
            .movie-show-time {
              height: 21px;
              line-height: 21px;
              & > span {
                opacity: 0.6;
                font-size: 12px;
              }
            }
          }
        }
        .btns {
          display: flex;
          justify-content: space-between;
          & > button {
            padding: 15px;
            border: none;
            display: flex;
            justify-content: center;
            align-items: center;
            background: hsla(0, 0%, 100%, 0.35);
            box-shadow: 0 1px 4px 0 rgb(0 0 0 / 10%);
            border-radius: 4px;
            font-size: 14px;
            width: 47.61904762%;
            height: 0.6rem;
            color: #fff;
            & > img {
              width: 14px;
              height: 14px;
              margin-right: 5px;
            }
          }
          .wanted-to-watch {
            background-color: hsla(0, 0%, 100%, 0.2);
            box-shadow: 0 1px 4px 0 rgb(0 0 0 / 15%);
            opacity: 0.3;
            font-size: 14px;
          }
        }
      }
    }
    .real-time-word-of-mouth {
      background-color: rgba(0, 0, 0, 0.18);
      border-radius: 8px;
      margin-top: 15px;
      padding: 9px 10px 10px 0;
      box-sizing: border-box;

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: PingFangSC-Regular;
        padding-left: 10px;

        .left {
          font-size: 12px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-weight: 400;
          & > img {
            width: 15.6px;
            height: 15.6px;
            margin-right: 4px;
          }
          & > span {
            font-size: 12px;
            color: #fff;
          }
        }
        .right {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          font-size: 12px;
          margin-right: 2px;

          .num {
            color: #fff;
            opacity: 0.6;
            font-size: 12px;
            transform: scale(0.9);
          }
          .watch {
            margin-left: 13px;
          }
          .img {
            & > img {
              width: 5px;
              height: 9px;
              margin-left: 4px;
            }
          }
        }
      }
      .middle {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 11px 3px;

        .left-section {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-grow: 1;

          .left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            margin-right: 4px;

            .score {
              font-weight: 600;
              font-family: MaoYanHeiTi-H-H;
              font-size: 26px;
              color: #ffb400;
              line-height: 26px;
              letter-spacing: 0;
              text-align: center;
              margin-bottom: 4px;

              .txt {
                font-size: 12px;
                color: #fff;
                opacity: 0.8;
              }
            }
            .people-grade {
              font-weight: 400;
              opacity: 0.6;
              font-family: PingFangSC-Regular;
              font-size: 20px;
              display: flex;
              word-break: keep-all;
              color: hsla(0, 0%, 100%, 0.4);
              letter-spacing: 0;
              text-align: center;
              line-height: 10px;
              zoom: 0.5;

              & > span {
                font-weight: 400;
                font-family: PingFangSC-Regular;
                font-size: 20px;
                word-break: keep-all;
                color: hsla(0, 0%, 100%, 0.4);
                letter-spacing: 0;
                text-align: center;
                line-height: 10px;
              }
            }
          }
          .wanted {
            align-items: center !important;
          }
          .right {
            .stars-percent-bar {
              display: flex;
              align-items: center;
              margin-bottom: 3px;

              .stars {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                width: 35px;

                & > img {
                  width: 5px;
                  height: 5px;
                  margin-left: 0.3px;
                  opacity: 0.4;
                }
              }
              .bar {
                width: 71px;
                height: 4px;
                background-color: hsla(0, 0%, 100%, 0.06);
                border-radius: 1px;
                margin-left: 4px;

                .percent {
                  height: 100%;
                  width: 0;
                  background: hsla(0, 0%, 100%, 0.3);
                  border-radius: 1px;
                  transition: width 1.5s;
                }
              }
              &:nth-child(1) {
                .bar {
                  .percent {
                    &.active1 {
                      animation: animation2 1s linear forwards;
                    }
                  }
                }
              }
              &:nth-child(2) {
                .bar {
                  .percent {
                    &.active1 {
                      animation: animation3 1s linear forwards;
                    }
                  }
                }
              }
              &:nth-child(3) {
                .bar {
                  .percent {
                    &.active1 {
                      animation: animation4 1s linear forwards;
                    }
                  }
                }
              }
              &:nth-child(4) {
                .bar {
                  .percent {
                    &.active1 {
                      animation: animation5 1s linear forwards;
                    }
                  }
                }
              }
              &:nth-child(5) {
                .bar {
                  .percent {
                    &.active1 {
                      animation: animation6 1s linear forwards;
                    }
                  }
                }
              }
            }
          }
        }
        .right-reputation {
          margin-right: 5px;
          width: 120px;
          display: flex;
          justify-content: flex-end;
          align-self: center;

          .reputation-box {
            width: 120px;
            height: 44px;
            box-sizing: border-box;
            background-image: linear-gradient(
              270deg,
              rgba(0, 0, 0, 0.04),
              rgba(226, 177, 117, 0.11)
            );
            border-radius: 6px;
            padding: 4px;
            position: relative;

            & > img {
              width: 29px;
              height: 36px;
            }
            .rank {
              position: absolute;
              left: 0;
              top: 9px;
              display: flex;
              flex-direction: column;
              font-family: PingFangSC-Medium;
              width: 29px;
              margin-left: 4px;

              .rank-top {
                font-size: 18px;
                line-height: 10px;
                font-weight: 600;
                text-shadow: 0 1px 4px #8e5d25;
                font-family: PingFangSC-Semibold;
                color: rgba(255, 229, 150, 0.7);
                letter-spacing: 0;
                transform: scale(0.5);
                width: 19px;
                transform-origin: 50%;
              }
              .rank-num {
                font-size: 15px;
                line-height: 13px;
                font-family: MaoYanHeiTi-H-H;
                color: #ffe186;
                letter-spacing: 0;
                text-align: center;
                margin-top: 3px;
              }
            }
            .desc {
              height: 27px;
              position: absolute;
              left: 38px;
              top: 8px;
              display: flex;
              flex-direction: column;
              overflow: hidden;
              white-space: nowrap;
              width: 85px;

              .first-word {
                font-weight: 400;
                font-family: PingFangSC-Regular;
                opacity: 0.7;
                font-size: 20px;
                color: #ffeec1;
                letter-spacing: 0;
                height: 13px;
                line-height: 13px;
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                transform-origin: 0;
              }
              .second-word {
                font-weight: 500;
                font-family: PingFangSC-Medium;
                color: #fff4bd;
                letter-spacing: 0;
                line-height: 14px;
                height: 14px;
                text-shadow: 0 1px 3px rgb(166 97 48 / 50%);
                font-size: 22px;
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                transform-origin: 0;
              }
            }

            &::after {
              display: block;
              position: absolute;
              left: 0;
              top: 0;
              width: 200%;
              height: 200%;
              border: 1px solid #b49c70;
              content: " ";
              -webkit-transform: scale(0.5);
              transform: scale(0.5);
              -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
              border-radius: 12px;
            }
          }
        }
      }
      .awardBottom {
        margin-top: 7px;
        background: rgba(0, 0, 0, 0.12);
        border-radius: 6px;
        padding: 0 5px 0 11px;
        margin-left: 10px;
      }
    }
    .movie-watching-tips {
      position: relative;
      padding: 10px 0;
      font-size: 15px;

      .tip {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 5px 0;

        .icon {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 18px;
          height: 18px;
          margin-right: 7px;
        }
        & > span {
          color: #fff;
        }
      }
    }
    .brief-introduction {
      position: relative;
      padding: 16px 0 0;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        & > span {
          color: #fff;
          font-size: 15px;
        }
        & > div {
          & > button {
            font-size: 12px;
            opacity: 0.6;
            color: #fff;
            width: 45px;
            border: none;
            margin: 0;
            padding: 0;
            outline: none;
            background-color: transparent;

            & > img {
              width: 5px;
              height: 8px;
              margin-left: 6px;
              display: inline-block;
            }
          }
          .open {
            & > img {
              transform: rotate(90deg);
            }
          }
          .close {
            & > img {
              transform: rotate(-90deg);
            }
          }
        }
      }
      .content {
        font-size: 15px;
        line-height: 26px;
        overflow: hidden;
        color: #fff;

        .normal-line {
          word-wrap: break-word;
          word-break: break-all;
        }
        .line-clamp {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
    .actors {
      margin-top: 18px;
      .title {
        font-size: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;

        .go-to-all-actors {
          opacity: 0.6;
          font-size: 12px;
          color: #fff;

          & > img {
            width: 5px;
            height: 8px;
            margin-left: 6px;
            display: inline-block;
          }
        }
      }
      .actor-list {
        margin-top: 11px;

        & > ul {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          overflow-x: scroll;

          & > li {
            flex-shrink: 0;

            & > div {
              display: flex;
              flex-flow: column;
              justify-content: center;
              align-items: center;
              width: 82px;
              & > img {
                width: 80px;
                height: 112px;
                display: block;
                background: none;
              }
              .name {
                height: 18px;
                line-height: 18px;
                color: #fff;
                font-size: 12px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 100%;
                text-align: center;
              }
              .role {
                height: 18px;
                line-height: 18px;
                color: #fff;
                font-size: 12px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 100%;
                text-align: center;
                opacity: 0.4;
              }
            }
          }
          .left-margin {
            margin-left: 6px;
          }
          &::-webkit-scrollbar {
            display: none;
          }
        }
      }
    }
    .videos {
      margin-top: 18px;

      .title {
        font-size: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;

        .go-to-all {
          opacity: 0.6;
          font-size: 12px;
          color: #fff;

          & > img {
            width: 5px;
            height: 8px;
            margin-left: 6px;
            display: inline-block;
          }
        }
      }
      .videos-list {
        margin-top: 11px;

        & > ul {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          overflow-x: scroll;

          .video {
            flex-shrink: 0;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
            margin-left: 8px;

            & > div {
              display: flex;
              justify-content: center;
              align-items: center;
              position: relative;

              & > img {
                width: 140px;
                height: 93px;
                border-radius: 8px;
                background: rgba(0, 0, 0, 0.7);
              }
              .play {
                position: absolute;
                top: 30.5px;
                left: 54px;
                box-sizing: border-box;
                width: 32px;
                height: 32px;
                background: hsla(0, 0%, 100%, 0.9);
                box-shadow: 0 0 0.04rem 0 rgb(0 0 0 / 30%);
                border-radius: 16px;

                .triangle {
                  position: absolute;
                  width: 0;
                  height: 0;
                  border-color: transparent transparent transparent #222;
                  border-style: solid;
                  border-width: 6px 9px;
                  top: 10px;
                  left: 13px;
                }
              }
            }
          }
          &::-webkit-scrollbar {
            display: none;
          }
        }
      }
    }
    .photos {
      margin-top: 18px;

      .title {
        font-size: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;

        .go-to-all {
          opacity: 0.6;
          font-size: 12px;
          color: #fff;

          & > img {
            width: 5px;
            height: 8px;
            margin-left: 6px;
            display: inline-block;
          }
        }
      }
      .photos-list {
        margin-top: 11px;

        & > ul {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          overflow-x: scroll;

          & > li {
            flex-shrink: 0;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
            margin-left: 8px;
            & > div {
              width: 140px;
              height: 93px;
              display: inline-block;
              background: #f5f5f5 url("../assets/images/maouanloading.png")
                no-repeat 50%;
              background-size: 50%;
              & > img {
                width: 140px;
                height: 93px;
              }
            }
          }
          &::-webkit-scrollbar {
            display: none;
          }
        }
      }
    }
  }
  .discussion {
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
    margin-top: -12px;
    position: relative;

    header {
      display: flex;
      justify-content: space-between;
      padding: 13px 16px 14px 16px;

      .title {
        font-size: 15px;
        color: #333;
      }
    }
    .comments {
      .no-padding-top {
        padding-top: 0;
      }
      article {
        padding: 15px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        border-bottom: 0.5px solid #f2f2f2;
        .left {
          .avatar {
            height: 34px;
            width: 34px;
            border-radius: 17px;
          }
        }
        .right {
          margin-left: 11px;
          flex-grow: 1;

          .top {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            .title-container {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: center;

              .name-box {
                display: flex;
                align-items: center;

                .name {
                  font-size: 12px;
                  color: #333;
                }
                .level-icon {
                  width: 36px;
                  height: 16px;
                  margin-left: 6px;
                }
              }
              .commentstar {
                display: flex;
                flex-direction: row;
                justify-content: start;
                align-items: center;

                .star-wrap {
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;

                  .star-img {
                    width: 9px;
                    height: 9px;
                    margin-right: 2px;
                  }
                  .star-score {
                    font-size: 12px;
                    color: #faaf00;
                    font-family: PingFangSC-Regular;
                    display: block;
                    margin-left: 5px;
                  }
                  .star-word {
                    transform: scale(0.75);
                    font-size: 12px;
                    color: #faaf00;
                    font-family: PingFangSC-Regular;
                    display: block;
                  }
                }
                .commentstar-buyticket {
                  height: 18px;
                  line-height: 18px;
                  border: 0.5px solid #4f89b3;
                  border-radius: 10px;
                  padding: 0 5px;
                  font-family: PingFangSC-Regular;
                  color: #4f89b3;
                  font-size: 12px;
                  text-align: center;
                  display: block;
                  transform: scale(0.75);
                }
              }
            }
            .title-appove {
              border-radius: 13px;
              text-align: center;
              height: 26px;
              line-height: 26px;
              display: flex;
              justify-content: center;
              align-items: center;
              position: relative;
              padding: 0 10px;
              .hierarchy {
                .link {
                  .thumb-up {
                    width: 16px;
                    height: 16px;
                    display: inline-block;
                    vertical-align: middle;
                  }
                  .approve-word {
                    font-weight: 400;
                    font-size: 12px;
                    color: #999;
                    font-family: PingFangSC-Regular;
                    margin-left: 5.5px;
                  }
                }
              }
              &::after {
                content: " ";
                position: absolute;
                top: 0;
                left: 0;
                width: 200%;
                height: 52px;
                transform: scale(0.5);
                transform-origin: 0 0;
                border: 1px solid #ccc;
                border-radius: 26px;
              }
            }
          }
          .middle {
            width: 300px;
            margin-top: 5px;

            .comment-content {
              font-size: 15px;
              color: #333;
              line-height: 21px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 7;
              text-overflow: ellipsis;
              word-wrap: break-word;
              word-break: break-all;
              overflow: hidden;
            }
          }
          .bottom {
            margin-top: 10px;
            font-size: 12px;
            color: #666;

            .goto-comments {
              display: inline-block;
              .reply {
                height: 18px;
                line-height: 18px;
                display: inline-block;
                background: #eef1f6;
                border-radius: 10.5px;
                text-align: center;
                font-size: 12px;
                color: #5a7cab;
                padding: 2px 6px;
                margin-left: 8px;
                & > span {
                  margin-left: 4px;
                }
              }
            }
          }
        }
      }
    }
  }
  .related-movies {
    margin-top: 8px;
    background-color: #fff;
    margin-bottom: 60px;

    header {
      height: 45px;
      padding-left: 15px;
      font-size: 15px;
      line-height: 45px;
      color: #333;
    }
    .movies {
      & > ul {
        display: flex;
        justify-content: flex-start;
        padding: 0 13px;
        overflow-x: scroll;

        & > li {
          flex-shrink: 0;
          padding: 0 4px 15px 0;

          .img-box {
            position: relative;
            width: 96px;
            height: 134px;
            border-radius: 2px;
            overflow: hidden;
            & > img {
              display: block;
              width: 100%;
              height: 100%;
            }
            .img-mask {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background-image: linear-gradient(
                -180deg,
                rgba(29, 29, 29, 0) 68%,
                #1d1d1d
              );
            }
            .grade {
              position: absolute;
              top: 114px;
              left: 6px;
              font-size: 11px;
              color: #faaf00;
            }
          }
          .name {
            height: 22.5px;
            line-height: 22.5px;
            display: block;
            width: 96px;
            font-size: 15px;
            color: #333;
            margin-top: 7px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }
        &::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }
  .buy-ticket-btn {
    background-color: #fff;
    height: 60px;
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: hidden;
    margin: 0;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;

    .buy-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      & > img {
        margin-left: 24px;
        margin-right: 30px;
        width: 19px;
        height: 19px;
      }
      .goto-ticket {
        flex: 1;
        height: 44px;
        background-image: linear-gradient(-90deg, #fb3333, #ff5269);
        box-shadow: 0 3px 6px 0 rgb(251 51 51 / 30%);
        border-radius: 25px;
        font-size: 17px;
        color: #fff;
        text-align: center;
        line-height: 44px;
        margin: 0 10px;
      }
    }
  }
  &::-webkit-scrollbar {
    display: none;
  }
}
@keyframes animation1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.lodaing {
  width: 100%;
  height: 85vh;
  position: fixed;
  bottom: 50px;
  left: 0;
  background-color: #fff;
  z-index: 99;

  .img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 45px;
    height: 45px;

    img {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 3;
    }

    .img2 {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      animation: animation1 1s linear 0s infinite;
    }
  }
}
.tag_back{
        position: absolute;
        left: -4px;
        top: 50%;
        width: 0px;
        max-width: 20px;
        height: 90px;
        background-color: rgba(0, 0, 0, 0.4);
        border-top-right-radius: 50% 50%;
        border-bottom-right-radius: 50% 50%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        transition: all 0.2s ease-in-out;

        .tag_icon{
           display: inline-block;
           width: 8px;
           height: 8px;
           position: relative;
           margin-right: 5px;
            &::after{
                content: '';
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                border-bottom: 2px solid #fff;
                border-left: 2px solid #fff;
                transform: rotate(225deg);
            }
        }
    }
@keyframes animation2 {
  from {
    width: 0;
  }

  to {
    width: 92.2%;
  }
}

@keyframes animation3 {
  from {
    width: 0;
  }

  to {
    width: 6%;
  }
}

@keyframes animation4 {
  from {
    width: 0;
  }

  to {
    width: 1.9%;
  }
}

@keyframes animation5 {
  from {
    width: 0;
  }

  to {
    width: 0.2%;
  }
}

@keyframes animation6 {
  from {
    width: 0;
  }

  to {
    width: 0.9%;
  }
}

</style>